<template>
  <div class="tmpl">
    <!--借用mint-ui的轮播组件-->
    <mt-swipe :auto="4000">
      <mt-swipe-item>
        <img src="../assets/lunbo1.jpg" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/lunbo2.jpg" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/lunbo3.jpg" alt="">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/lunbo4.jpg" alt="">
      </mt-swipe-item>
    </mt-swipe>
    <!--使用mui的九宫格-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/movie">
          <span class="mui-icon iconfont icon-dianying"></span>
          <div class="mui-media-body">电影</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/books">
          <span class="mui-icon iconfont icon-tu"></span>
          <div class="mui-media-body">图书</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/music">
          <span class="mui-icon iconfont icon-tubiao_yinle"></span>
          <div class="mui-media-body">音乐</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/news">
          <span class="mui-icon iconfont icon-xinwen"></span>
          <div class="mui-media-body">新闻</div></router-link></li>
      </ul>
    </div>
    <div class="myself">
      <p>姓名：张海鹏</p>
      <p>期望职位：前端开发工程师</p>
      <p>电话：13077579337</p>
      <p>邮箱：13077579337@163.com</p>
    </div>
  </div>


</template>
<script>
  export default{

  }
</script>
<style scoped>
  .mint-swipe{
    height: 200px;
  }

  .mint-swipe img{
    width: 100%;
  }
.mui-content .mui-grid-view{
  background: white;
}
  .icon-dianying::before{
     color: #2384E8;
   }
  .icon-tu::before{
    color: #9F7860;
  }
  .icon-tubiao_yinle::before{
    color: #E4A813;
  }
.myself{
  text-align: center;
  margin: 30px 0;
}
</style>
